<template>
	<view class="reprot ff-padding-bottom-70">
		<view v-if="testProjectDetails.testStatus == 8" class="ff-padding-10 ff-color-fff ff-bg-red ff-font-13">
			驳回原因：{{ testProjectDetails.reportRefuseReason ? testProjectDetails.reportRefuseReason : '/' }}
		</view>
		<view class="report-header ff-bg-blue" :class="{'headHeight' : testProjectDetails.testName.length > 30}">
			<view class="report-header-content">
				<view class="report-header-content-success ff-color-fff ff-font-18 ff-line-height-1-3">
					{{ testProjectDetails.testName }}
				</view>
				<view class="ff-font-12 ff-flex-wrap">
					<view v-if="testProjectDetails.testStatus == 2" class="tips2">检测状态&nbsp;|&nbsp;已响应</view>
					<view v-if="testProjectDetails.testStatus == 3" class="tips2">检测状态&nbsp;|&nbsp;待指派</view>
					<view v-if="testProjectDetails.testStatus == 11" class="tips2">检测状态&nbsp;|&nbsp;待检测</view>
					<view v-if="testProjectDetails.testStatus == 4" class="tips2">检测状态&nbsp;|&nbsp;检测中</view>
					<view v-if="testProjectDetails.testStatus == 5" class="tips2">检测状态&nbsp;|&nbsp;待提交</view>
					<view v-if="testProjectDetails.testStatus == 6" class="tips2">检测状态&nbsp;|&nbsp;待审核</view>
					<view v-if="testProjectDetails.testStatus == 7" class="tips2">检测状态&nbsp;|&nbsp;待签发</view>
					<view v-if="testProjectDetails.testStatus == 8" class="tips2">检测状态&nbsp;|&nbsp;已驳回</view>
					<view v-if="testProjectDetails.testStatus == 9" class="tips2">检测状态&nbsp;|&nbsp;已完成</view>
					<view v-if="testProjectDetails.testStatus == 10" class="tips5">检测状态&nbsp;|&nbsp;已解约</view>
					<view v-if="testProjectDetails.testStatus == 10" class="tips5">检测状态&nbsp;|&nbsp;已作废</view>
					<view v-if="testProjectDetails.testStatus == 13" class="tips5">检测状态&nbsp;|&nbsp;已提交</view>
				</view>
				<view
					class="report-content ff-border-radius-10 ff-relative ff-bg-fff ff-margin-12 ff-font-14 ff-padding-top-15 ff-padding-bottom-1">
					<view @click.stop="reportClick(item)" class="ff-flex-between but-tips1 ff-border-radius-10">
						<view class="ff-flex ff-align-items">
							<img src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/report3.png"
								alt="" />
							<view class="ff-font-weight-600">检测报告</view>
						</view>
						<view class="tips-view1">查看</view>
					</view>
					<view @click.stop="files(item)"
						class="ff-flex-between ff-relative but-tips1 but-tips2 ff-border-radius-10">
						<view class="ff-flex ff-align-items">
							<img src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/report2.png"
								alt="" />
							<view class="ff-font-weight-600">检测档案</view>
						</view>
						<view class="tips-view1 tips-view2">查看</view>
					</view>
					<view @click.stop="contract(item)"
						class="ff-flex-between ff-relative but-tips1 but-tips3 ff-border-radius-10">
						<view class="ff-flex ff-align-items">
							<img src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/report1.png"
								alt="" />
							<view class="ff-font-weight-600">合同</view>
						</view>
						<view class="tips-view1 tips-view3">查看</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 按钮区 -->
		<view>
			<!-- 待审核 -->
			<view class="report-but ff-flex"
				v-if="testProjectDetails.testStatus == 6 && userInfo.id == testProjectDetails.reviewers[0].projectReviewer">
				<view class="report-but-reject animate__animated animate__bounceInLeft"><u-button
						@click="checkCertificateValid('rejectClick')" type="warning">驳回</u-button></view>
				<view class="report-but-pass animate__animated animate__bounceInRight"><u-button
						@click="checkCertificateValid('passClick')" type="primary">通过</u-button></view>
			</view>
			<!-- 待签发 -->
			<view class="report-but ff-flex"
				v-if="testProjectDetails.testStatus == 7 && userInfo.id == testProjectDetails.signers[0].projectSigner">
				<view class="report-but-reject animate__animated animate__bounceInLeft"><u-button
						@click="checkCertificateValid('rejectClick')" type="warning">驳回</u-button></view>
				<view class="report-but-pass animate__animated animate__bounceInRight"><u-button
						@click="checkCertificateValid('passClick')" type="primary">签发</u-button></view>
			</view>
		</view>

		<!-- 组件区 -->
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'Report',
		data() {
			return {
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				testProjectDetails: {}, // 检测项目详情
				reportInfo: [] // 报告书内容数据
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			this.gettestProjectDetails(e.id); // 获取检测项目详情
		},
		computed: {
			// 用户角色状态
			...mapState({
				userInfo: modules => modules.infoList.userInfo
			})
		},
		methods: {
			// 获取检测项目详情
			async gettestProjectDetails(testId) {
				this.$refs.loading.openLoading('加载中···');
				let params = {
					testId: testId
				};
				const data = await this.$http.post({
					url: `/bsTestProjectInfo/org/detail`,
					data: params
				});
				// console.log('获取检测项目详情-----', data);
				if (data.code == 200) {
					this.testProjectDetails = data.data;
				}
				this.$refs.loading.closeLoading();
			},
			// 检测报告
			reportClick() {
				let that = this
				if (!that.testProjectDetails.reportUrl) {
					that.$refs.uToast.show({
						title: '检测报告生成中，请稍后再试',
						type: 'warning'
					});
					return;
				}
				that.$refs.loading.openLoading('检测报告获取中···');
				uni.downloadFile({
					url: that.testProjectDetails.reportUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								that.$refs.loading.closeLoading();
								// console.log('打开文档成功');
							}
						});
					}
				});
			},
			// 检测档案
			files() {
				let that = this
				if (!that.testProjectDetails.archiveUrl) {
					that.$refs.uToast.show({
						title: '检测档案生成中，请稍后再试',
						type: 'warning'
					});
					return;
				}
				that.$refs.loading.openLoading('检测档案获取中···');
				uni.downloadFile({
					url: that.testProjectDetails.archiveUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								that.$refs.loading.closeLoading();
								// console.log('打开文档成功');
							}
						});
					}
				});
			},
			// 合同
			contract() {
				let that = this
				if (!that.testProjectDetails.contractUrl) {
					that.$refs.uToast.show({
						title: '合同生成中，请稍后再试',
						type: 'warning'
					});
					return;
				}
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];
				const ext = that.testProjectDetails.contractUrl.split('.').pop().toLowerCase(); // toLowerCase转换为小写
				console.log('ext', ext)
				if (imageExtensions.includes(ext)) {
					let put = []
					put.push(that.testProjectDetails.contractUrl)
					uni.previewImage({
						current: that.testProjectDetails.contractUrl,
						urls: put
					});
				} else {
					that.$refs.loading.openLoading('合同获取中···');
					uni.downloadFile({
						url: that.testProjectDetails.contractUrl,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									that.$refs.loading.closeLoading();
									// console.log('打开文档成功');
								}
							});
						}
					});
				}
			},

			// --------跳转区--------------------
			// 检查证书是否到期
			async checkCertificateValid(e) {
				let that = this
				const data = await this.$http.post({
					url: '/bsTestProjectInfo/org/checkForCertificate?testId=' + this.testProjectDetails.id
				})
				// console.log('检查证书是否到期', data)
				if (data.code == 200) {
					if (data.data.certificateInValid && data.data.oneCertificate) {
						uni.showModal({
							title: '证书已到期',
							content: data.data.msg,
							confirmColor: '#3178FF',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									// console.log('用户点击确定')
								}
							},
						})
					} else {
						if (e == 'passClick') {
							that.passClick() // 签发or通过
						} else if (e == 'rejectClick') {
							that.rejectClick() // 驳回
						}
					}
				} else {
					uni.showModal({
						title: '温馨提示',
						content: data.msg,
						confirmColor: '#3178FF',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定')
							}
						},
					})
				}
			},
			// 驳回报告书
			rejectClick() {
				this.$pageJump.navigateTo(
					'/pages/detection/mechanism/home/components/details/rejectReport?id=' + this
					.testProjectDetails.id);
			},
			// 通过or签发--操作---第一步
			async passClick() {
				let that = this;
				//  testStatus=6:待审核状态，跳转页面。 testStatus=7：待签发状态，弹窗
				if (that.testProjectDetails.testStatus == 6) {
					uni.showModal({
						title: '温馨提示',
						content: '请确认是否通过审核？',
						confirmText: '确认通过',
						cancelText: '取消',
						confirmColor: '#3178FF',
						showCancel: true,
						success: res => {
							if (res.confirm) {
								that.$refs.loading.openLoading('提交中···');
								that.$http.post({
									url: `/bsTestProjectInfo/org/reviewPass/${that.testProjectDetails.id}`
								}).then(data => {
									// console.log('审核通过', data)
									that.$refs.loading.closeLoading();
									if (data.code == 200) {
										that.$refs.uToast.show({
											title: data.msg,
											type: 'success'
										});
										setTimeout(() => {
											that.$pageJump.reLaunch(
												'/pages/detection/mechanism/Maintenance'
											);
										}, 500);
									} else {
										that.$refs.uToast.show({
											title: data.msg,
											type: 'error'
										});
									}
								})
							}
						}
					});

				} else {
					uni.showModal({
						title: '温馨提示',
						content: '报告书即将签发，签发后不可再编辑。请确认是否签发？',
						confirmText: '确认签发',
						cancelText: '取消',
						confirmColor: '#3178FF',
						showCancel: true,
						success: res => {
							if (res.confirm) {
								that.$refs.loading.openLoading('提交中···');
								that.$http.post({
									url: `/bsTestProjectInfo/org/signPass/${that.testProjectDetails.id}`
								}).then(data => {
									// console.log('审核通过', data)
									that.$refs.loading.closeLoading();
									if (data.code == 200) {
										that.$refs.uToast.show({
											title: data.msg,
											type: 'success'
										});
										setTimeout(() => {
											that.$pageJump.reLaunch(
												'/pages/detection/mechanism/Maintenance'
											);
										}, 500);
									} else {
										that.$refs.uToast.show({
											title: data.msg,
											type: 'error'
										});
									}
								})
							}
						}
					})
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.tips2 {
		background-color: #fff;
		color: #3178ff;
		padding: 12rpx 15rpx;
		border-radius: 8rpx;
		margin: 15rpx 0 0 50rpx;
	}

	.headHeight {
		height: 490rpx !important;
	}

	.report {
		&-header {
			height: 320rpx;

			&-content {
				position: relative;

				&-success {
					padding: 50rpx 56rpx 0;
				}

				image {
					width: 340rpx;
					height: 80rpx;
					// position: absolute;
					// right: 2%;
					// top: 18%;
				}
			}
		}

		&-content {
			margin-top: 30rpx;
			position: relative;

		}

		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;

			/deep/.u-btn--primary {
				height: 100rpx !important;
				line-height: 100rpx !important;
			}

			&-reject {
				width: 50%;

				/deep/.u-btn--warning {
					border: 2rpx solid #3178ff;
					background-color: #ffffff;
					color: #3178ff;
				}

				/deep/.u-warning-hover {
					background-color: #ffffff !important;
				}
			}

			&-pass {
				width: 50%;
			}
		}
	}

	.questionImg {
		width: 100%;
		height: 140rpx;
	}

	.codeImg {
		width: 300rpx;
		height: 230rpx;
	}

	/deep/.u-size-default {
		height: auto !important;
	}

	.but-tips1 {
		margin: 0 26rpx 30rpx 26rpx !important;
		padding: 40rpx;
		background-color: #FFF9F8;
		border: 2rpx solid #FED5D2;

		img {
			width: 65rpx;
			height: 65rpx;
			margin-right: 15rpx;
		}
	}

	.but-tips2 {
		background-color: #FFF8F2;
		border: 2rpx solid #FFDEB4;
	}

	.but-tips3 {
		background-color: #F3F9FF;
		border: 2rpx solid #D5E7FF;
	}

	.tips-view1 {
		display: inline;
		background-color: #FFECE9;
		color: #E4503E;
		width: 120rpx;
		height: 65rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		text-align: center;
	}

	.tips-view2 {
		background-color: #FFECDC;
		color: #FF8E00;
	}

	.tips-view3 {
		background-color: #E2F1FF;
		color: #5194FF;
	}
</style>